<template>
  <div v-cloak>
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <span>设备所在辖区</span>
        <treesBox :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
      </div>
    </div>
    <div class="main_r" :style="{ minHeight: transferHeight.contentH + 'px' }">
      <!-- Echarts 图标 -->
      <div class="t" style="position: relative">
        <div style="font-size: 16px;color:'#2F3033;position:absolute;z-index:90;left: 15px;top: 15px;">运维主机状况(台)</div>
        <echarts-load v-if="pieFlag || reload_pie" :chartFlag="pieFlag" :reload="reload_pie" @refreshF="refreshPie" />
        <el-row class="t_container" v-else>
          <el-col :span="12">
            <!-- <span>前卫主机状况(台)</span> -->
            <!-- <div v-loading="pieFlag" v-if="pieFlag" style="height:100%"></div> -->
            <qwzj-pie v-if="!pieFlag || !reload_pie" :index="normalData" :pieData="pieData" :pieDataType="'ZC'" :pageType="'qwHost'" />
          </el-col>
          <el-col :span="12">
            <!-- <span style="opacity: 0;">前卫主机状况(台)</span> -->
            <!-- <div v-loading="pieFlag" v-if="pieFlag" style="height:100%"></div> -->
            <qwzj-pie v-if="!pieFlag || !reload_pie" :index="abnormalData" :pieData="pieData" :pieDataType="'YC'" :pageType="'qwHost'" />
          </el-col>
        </el-row>
      </div>
      <div class="b">
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
          <!-- <el-form-item label="设备状态:">
            <el-select v-model="searchCriteria.typeVal" class="inputWidth" clearable placeholder="请选择">
              <el-option label="正常" value="0"></el-option>
              <el-option label="异常" value="1"></el-option>
            </el-select>
          </el-form-item>-->
          <!-- <el-form-item label="检测时间:">
            <el-date-picker
              v-model="searchCriteria.dataTime"
              :picker-options="pickerBeginDateBefore"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>-->
          <el-form-item>
            <el-input v-model.trim="searchCriteria.namer" width="200" prefix-icon="el-icon-search" clearable placeholder="输入设备名称或设备IP"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
          :cell-class-name="addClass"
          ref="multipleTable"
          :data="tableData"
          @row-dblclick="rowClick"
          style="width: 100%"
          border
          highlight-current-row
          stripe
          v-loading="tableLoad"
          @sort-change="sortthiscolumn"
        >
          <!-- 提示语句 -->
          <template slot="empty">{{ tableMessage }}</template>
          <el-table-column type="index" label="序号" min-width="50" align="center" />
          <el-table-column prop="zcmc" label="设备名称" sortable :show-overflow-tooltip="true" min-width="150">
            <template slot-scope="scope">
              <svg class="iconfont" aria-hidden="true">
                <use :xlink:href="'#el-icon-my' + (scope.row.zxzt === 2 ? 'not_generated' : 'generated')" style="font-size: 50px" />
              </svg>
              <span v-html="getzcmc(scope.row)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="zclxmc" label="设备类型" min-width="120" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-html="getsblx(scope.row)"></span>
            </template>
          </el-table-column>
          <el-table-column label="安装地址" min-width="120" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ scope.row.zcsfmc + scope.row.zccsmc + scope.row.zcqxmc + scope.row.zcjdmc + scope.row.xxdz }}</template>
          </el-table-column>
          <el-table-column prop="ip" label="设备IP" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.ip }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="wtlxmc" label="问题" min-width="120">
            <template slot-scope="scope">
              <span :class="[scope.row.counts < 1 ? '' : 'haveLinks']" @click="gzXiangqing(scope.row)">{{ scope.row.counts }}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="ppmc" label="品牌" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.ppmc }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="xh" label="型号" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.xh }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="szs" label="宿主" min-width="98">
            <template slot-scope="scope">
              <!-- <el-tooltip v-for="(item, index) in scope.row.szs" :key="index" class="item" placement="top-start" popper-class="atooltip">
                <div slot="content">{{ item.SZMC }}</div>
                <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                  <use :xlink:href="`#el-icon-mysuzhu_${item.SZLX}`" style="font-size: 50px" />
                </svg>
              </el-tooltip>-->
              <span v-for="(item, index) in scope.row.szs" :key="index">
                <el-tooltip v-if="Number(item.SZLX) >= 0" class="item" placement="top-start" popper-class="atooltip">
                  <div slot="content">{{ item.SZMC }}</div>
                  <svg class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                    <!-- 0运维主机 1卡口 2电警 -->
                    <use :xlink:href="`#el-icon-mysuzhu_${item.SZLX}`" style="font-size: 50px" />
                  </svg>
                </el-tooltip>
                <svg v-else class="iconfont" aria-hidden="true" style="width: 20px; height: 20px">
                  <!-- 0运维主机 1卡口 2电警 -->
                  <use :xlink:href="`#el-icon-my${grayIcon[index]}`" style="font-size: 50px" />
                </svg>
              </span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="xh" label="" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.xh }}</span>
            </template>
          </el-table-column> -->
          <!-- <el-table-column prop="ywzjjcsj" label="检测时间" sortable="custom" min-width="150">
            <template slot-scope="scope">
              <span>{{scope.row.ywzjjcsj | dateFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="gdzt" label="工单状态" min-width="120">
            <template slot-scope="scope">
              <span
                :class="[`type${Number(scope.row.gdzt)}`,'type']"
              >{{type[Number(scope.row.gdzt)]}}</span>
            </template>
          </el-table-column>-->
          <el-table-column fixed="right" label="操作" min-width="80" align="right">
            <template slot-scope="scope">
              <div class="operations">
                <!-- 不可以点击加上 noAction这个类名 -->
                <!-- <el-button type="text" @click="handleClick(scope.row)">编辑</el-button> -->
                <el-button type="text" @click="showPingOk(scope.row)" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true">ping</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="page-row">
          <el-col :span="12">
            <div class="bigBOx btnBefore">
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mygenerated" />
                </svg>
                <span>在线</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mynot_generated" />
                </svg>
                <span>离线</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_0" />
                </svg>
                <span>运维主机</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_1" />
                </svg>
                <span>卡口</span>
              </div>
              <div class="imgBox">
                <svg class="iconfont imgIcon size17" aria-hidden="true">
                  <use xlink:href="#el-icon-mysuzhu_2" />
                </svg>
                <span>电子警察</span>
              </div>
            </div>
          </el-col>
          <el-col :span="12" style="height: 47px; display: table">
            <!-- <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[1, 5, 10, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
            ></el-pagination>-->
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total,prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
    <countList :countListData="countListData"></countList>
  </div>
</template>
<script>
import qwzjPie from '@/components/Echarts/qwzjPie'
import { getUrl } from '@/utils/getUrl.js'
import { yeWu } from '@/utils/allUrl'
import Ping from '@/components/ping/index.vue'
import treesBox from '@/components/treesBox/index.vue'
// import qwzjBar from '@/components/Echarts/qwzjBar'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import echartsLoad from '@/components/Echarts/echartsLoad'
import countList from '@/components/RunTesting/countList.vue'
import { threeLevelH } from '@/assets/js/calcHeight'
export default {
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
  },
  components: { qwzjPie, Ping, treesBox, echartsLoad, countList },
  data() {
    return {
      ping: {
        // ping
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      //  1 '已受理 (',当前处理人可看)
      //  2 '待确认',
      //  3 '正常关闭',
      //  4 '驳回',
      //  5 '挂起',
      //  6 '外派',
      //  7 '异常关闭',
      type: ['未生成', '已受理', '待确认', '正常关闭', '驳回', '挂起', '外派', '异常关闭'], // 正常和异常关闭不需要
      treesBox: {
        url: 'ZI_CHAN',
        // url: 'yonghu/selectYongHuXiaQuByZc',
        GZKZ: [53],
      }, // tree图的请求地址
      zicanOptions: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
      ], // 资产类型
      currentPage: 1, // 页码
      total: 0, // 总条数
      pageSize: 10, // 每页显示的条目数
      searchCriteria: {
        typeVal: '', // 设备类型
        // isGZ: '0', // 故障类型
        // dataTime: '', // 报障时间
        namer: '',
      },
      tableData: [],
      wtbmdjs: 1,
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      normalData: 0,
      abnormalData: 1,
      tableLoad: false,
      listQuery: {
        sortby: '',
        order: '',
      },
      city: '',
      cityLevel: 0,
      pieData: {},
      pieFlag: false,
      tableMessage: '',
      tableTimer: null,
      pieTimer: null,
      reload_pie: false,
      countListData: {
        type: '主机',
        url: 'wtjs/selectWTId', // 请求路径
        xianqingID: '', // 详情ID
        contractDialogVisible: false,
        contractDetailList: [], // 故障详情
      },
      grayIcon: ['zhuji_hui', 'kakou_hui', 'dzjc_hui'],
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    pieFlag(newVal, oldVal) {
      this.pieTimer = setTimeout(() => {
        if (this.pieFlag) {
          this.pieFlag = false
          this.reload_pie = true
        }
      }, timeLoad)
    },
  },

  created() {
    // this.treeData = JSON.parse(getUrl('xiaquCity'))
    // const order = this.listQuery.sortby
    // const sort = this.listQuery.order
    // const M_ = this.currentPage
    // const N_ = this.pageSize
    // this.initList(order, sort, M_, N_)
    // this.initGzlx()
    this.initPie()
    this.initList()
  },
  methods: {
    getzcmc(row) {
      return `<span>${row.zcmc}</span>`
    },
    getsblx(row) {
      return `<span>${row.zclxmc1 ? row.zclxmc1 + ' / ' : ''}</span>
                <span>${row.zclxmc2 ? row.zclxmc2 + ' / ' : ''}</span>
                <span>${row.zclxmc3}</span>`
    },
    async initList(SF, CS, QX, XZJD) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      switch (this.cityLevel) {
        case 1:
          params.append('SF', this.city)
          break
        case 2:
          params.append('CS', this.city)
          break
        case 3:
          params.append('QX', this.city)
          break
        case 4:
          params.append('XZJD', this.city)
          break
        default:
      }
      params.append('userId', JSON.parse(getUrl('userconter')).id) // 当前用户ID
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      params.append('M_', this.currentPage) // 当前页
      params.append('N_', this.pageSize) // 每页显示行数
      params.append('type', 1) // 每页显示行数

      // if (Array.isArray(this.searchCriteria.dataTime)) {
      //   params.append('KSJCSJ', this.searchCriteria.dataTime[0]) // 检测时间-开始时间
      //   params.append('JSJCSJ', this.searchCriteria.dataTime[1]) // 检测时间-结束时间
      // }
      params.append('zjzt', this.searchCriteria.typeVal)
      params.append('zcmc', this.searchCriteria.namer) // 设备名称,IP条件
      const { data: res } = await this.$http.post(yeWu + 'wtjs/selectWenTiGroup', params)

      this.tableLoad = false
      switch (res.code) {
        case '0000':
          this.tableData = res.data.list
          this.total = res.data.countList
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
    },
    async initPie() {
      clearTimeout(this.pieFlag)
      this.pieFlag = true
      const params = new URLSearchParams()
      params.append('userId', JSON.parse(getUrl('userconter')).id) // 当前用户ID
      const { data: res } = await this.$http.post(yeWu + 'wtjs/selectWenTiCount', params)
      this.pieFlag = false
      switch (res.code) {
        case '0000':
          this.pieData = res.data
          // console.log(this.pieData)
          // var count = res.data.YC + res.data.ZC
          // var yc = (res.data.YC / count) * 100
          // var zc = (res.data.ZC / count) * 100
          // var yc_fiex = yc.toFixed(2)
          // var zc_fiex = zc.toFixed(2)
          // this.pieData = { YC: yc_fiex, ZC: zc_fiex }

          break
        case '0013':
          this.pieData = { YC: 0, ZC: 0 }
          break
        default:
          this.reload_pie = true
          break
      }
    },
    refreshPie() {
      this.reload_pie = false
      this.initPie()
    },
    async initGzlx() {
      // 设备类型
      const params = new URLSearchParams()
      params.append('FLBISNULL', 0)
      const { data: res } = await this.$http.post(yeWu + 'wtgzzd/selectWenTiGuZhangZiDian', params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      res.data.list.forEach((item) => {
        const k = {
          value: item.id,
          label: item.lbmc,
        }
        this.zicanOptions.push(k)
      })
    },
    treeClick(e) {
      this.tableLoad = true // 表格加载中样式
      this.city = e.type.label
      this.cityLevel = e.type.levels
      // this.searchCriteria.typeVal = '' // 资产类型ID
      // this.searchCriteria.namer = '' // 设备名称,IP条件
      // this.searchCriteria.dataTime = ''
      this.currentPage = 1 // 重置页码
      this.pageSize = 10 // 重置每页页数
      this.initList()
    },
    // 查询按钮
    onSubmit() {
      this.tableLoad = true // 表格加载中
      this.currentPage = 1
      this.pageSize = 10
      this.initList() // 加载列表
    },
    rowClick() {},
    handleSizeChange(val) {
      this.tableLoad = true // 表格加载中
      this.pageSize = val
      this.currentPage = 1
      this.initList() // 加载列表
    },
    handleCurrentChange(val) {
      this.tableLoad = true // 表格加载中
      this.currentPage = val
      this.initList() // 加载列表
    },
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.initList()
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   return 'fontColor'
      // }
    },
    // ping
    showPingOk(val) {
      this.ping.speedOpen = true
      this.ping.ip = val.ip
      this.ping.name = val.zcmc
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    isArray(arg) {
      if (!Array.isArray) {
        Array.isArray = function (arg) {
          return Object.prototype.toString.call(arg) === '[object Array]'
        }
      }
    },
    gzXiangqing(val) {
      if (val.counts < 1) {
        return
      }
      this.countListData.contractDetailList = val
      this.countListData.contractDialogVisible = true
      this.countListData.xianqingID = val.id
      // this.huoquxiangqing()
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/xjzxCommon.scss';
.t {
  position: relative;
  > span {
    width: 100px;
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 100;
  }
}
</style>
